<template>
  <view class="wrap">
    <img class="img-Bg" src="https://ainengli.hzjrsw.com/jkhx/weight/phychology-bg.png" alt="" />
    <view class="sleep-grid">
      <view class="sleep-grid-col" @tap="gridHandle('test')">
        <img class="img-icon" src="@/static/image/phychology-green.png" alt="" />
        <view class="grid-text-wrap">
          <text>心理自测</text>
          <view class="grid-text">
            <text>立即查看</text>
          </view>
        </view>
      </view>
      <view class="sleep-grid-col">
        <img class="img-icon" src="@/static/image/phychology-pink.png" alt="" />
        <view class="grid-text-wrap">
          <text>心理咨询</text>
          <view class="grid-text">
            <text>立即查看</text>
          </view>
        </view>
      </view>
    </view>
    <view class="science">
      <view class="title-box">
        <text>知识科普</text>
      </view>
      <view class="list">
        <view v-for="(item, index) of articleList" :key="index" @tap="toDetail(item)" class="item">
          <view :class="['item-left', item.picList.length > 0 ? '' : 'width100']">
            <view class="item-title">{{ item.title }}</view>
            <view class="item-content">{{ item.summary }}</view>
          </view>
          <img v-if="item.picList.length > 0" class="item-right" :src="item.picList[0]" alt="" />
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { article_list } from './api'

const articleList = ref([])

onShow(() => {
  init()
})
const init = () => {
  article_list({ page: 1, limit: 10, categoryName: '心理', labelCode: '' }).then((res) => {
    articleList.value = res.data.list
  })
}
const gridHandle = (name: string) => {
  uni.navigateTo({
    url: `/packA/pages/psychology/${name}`
  })
}

const toDetail = (item: any) => {
  uni.navigateTo({ url: '/packA/pages/psychology/detail?id=' + item.id })
}
</script>
<style lang="scss" scoped>
.wrap {
  position: relative;
  min-height: 100vh;
  padding: 32rpx;
  background: #fafafa;
}

.img-Bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 467rpx;
}

.sleep-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16rpx 10rpx;
  margin-top: 280rpx;
}

.sleep-grid-col {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 144rpx;
  padding: 16rpx;
  font-size: 32rpx;
  font-weight: 700;
  color: #222;
  border-radius: 16rpx;
}

.img-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 331rpx;
  height: 144rpx;
}

.grid-text-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  margin-left: 108rpx;
  font-size: 36rpx;

  .grid-text {
    display: flex;
    margin-top: 4rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #666;
  }
}

.science {
  padding: 32rpx;
  margin-top: 32rpx;
  background: #fff;
  border-radius: 16rpx;

  .title-box {
    margin-bottom: 32rpx;
    font-size: 36rpx;
    font-weight: 700;
    color: #222;
  }

  .list {
    .item {
      display: flex;
      gap: 24rpx;
      justify-content: space-between;
      margin-bottom: 48rpx;

      .item-left {
        width: 384rpx;

        .item-title {
          margin-top: 8rpx;
          overflow: hidden;
          font-size: 32rpx;
          font-weight: 700;
          color: #222;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .item-content {
          display: -webkit-box;
          margin-top: 24rpx;
          overflow: hidden;
          font-size: 24rpx;
          font-weight: 400;
          color: #999;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }

      .width100 {
        width: 100%;
      }

      .item-right {
        width: 213rpx;
        height: 148rpx;
        border-radius: 16rpx;
      }
    }

    .item:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
